<template>
  <div class="app-container">
    <div class="filter-container flexswbt">
      <div></div>
      <div style="display: flex">
        <el-button
          class="filter-item"
          type="success"
          icon="el-icon-plus"
          @click="clickadd"
          >添加</el-button
        >
      </div>

      <!-- 列表 -->
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
<!--      <el-table-column-->
<!--        align="center"-->
<!--        prop="id"-->
<!--        label="会议室id"-->
<!--        min-width="100"-->
<!--      />-->
      <el-table-column prop="imgUrl" label="会议室图片" align="center">
        　　<template scope="scope">
        　　　　<img :src="scope.row.imgUrl" width="80" height="80" class="head_pic"/>
        　　</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="会议室名称"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="place"
        label="会议室地点"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="room"
        label="会议室房间"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="peopleNub"
        label="会议室预约人数"
        min-width="100"
      />
       <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="250"
        class-name="small-padding"
      >
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="update(scope.row)">
            修改
          </el-button>
          <el-button type="text" size="mini" @click="del(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getdata"
    />

    <!-- 创建任务弹窗 -->
    <el-dialog title="添加会议室" :visible.sync="dialogFormVisible" width="80%">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="会议室名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入会议室名称"></el-input>
        </el-form-item>
        <el-form-item label="会议室地点" prop="place">
          <el-input v-model="form.place" placeholder="请输入会议室地点"></el-input>
        </el-form-item>
        <el-form-item label="会议室房间" prop="room">
          <el-input v-model="form.room" placeholder="请输入会议室房间号"></el-input>
        </el-form-item>
        <el-form-item label="会议室预约人数" prop="peopleNub">
          <el-input v-model="form.peopleNub" placeholder="请输入会议室预约人数"></el-input>
        </el-form-item>

        <el-form-item label="附件" prop="url">
          <el-upload
            ref="upload"
            action="/aliyunFile/uploadFile"
            name="file"
            accept="*"
            :limit="1"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :before-remove="beforeremove"
          >
            <div style="display: flex; margin-top: 10px">
              <el-button size="small" type="primary" :loading="updateing"
                >点击上传</el-button
              >
              <div style="width: 10px"></div>
              <div slot="tip" class="el-upload__tip">
                <!-- 只能上传mp4格式的视频或pdf文件 -->
              </div>
            </div>
          </el-upload>
        </el-form-item>
        <el-image
          v-show="form.imgUrl"
          style="width: 100px; height: 100px"
          :src="form.imgUrl"
          fit="contain"></el-image>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import { save, list, update, del } from "@/api/conference";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import dayjs from "dayjs";
const defavalue = {
  name: "",
  place: "",
  room: "",
  imgUrl: "",
  peopleNub: "",
};
export default {
  components: { Pagination },
  computed: {
    ...mapGetters(["uid"]),
  },
  filters: {},
  data() {
    return {
      listQuery: {
        pageNo: 1,
        pageSize: 20,
      },
      listLoading: false,
      total: 0,
      list: [],
      form: {
        name: "",
        place: "",
        room: "",
        imgUrl: "",
        peopleNub: "",
      },
      updateing: false,
      dialogFormVisible: false,
      rules: {
        name: [{ required: true, message: "请输入会议室名称", trigger: "blur" }],
        place: [{ required: true, message: "请输入会议室地点", trigger: "blur" }],
        room: [{ required: true, message: "请输入会议室房间号", trigger: "blur" }],
        peopleNub: [{ required: true, message: "请输入会议室预约人数", trigger: "blur" }],
      },
    };
  },

  created() {
    this.getdata();
  },
  methods: {
    getdata() {
      this.listLoading = true;
      let data = { ...this.listQuery, creater: this.uid };
      list(data).then((res) => {
        this.list = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
        console.log(this.list);
      });
    },

    clickadd() {
      this.form = _.cloneDeep(defavalue);
      this.dialogFormVisible = true;
    },
    beforeAvatarUpload(file) {
      if (this.updateing) {
        return false;
      }
      this.form.filename = file.name;
      this.updateing = true;
      return true;
    },
    beforeremove() {
      this.updateing = false;
    },
    handleRemove(){
      this.form.imgUrl = ''
    },
    handleAvatarSuccess(res, file) {
      let data = res;
      console.log(data);
      if (data.status == 200) {
        let obj = data.data;
        this.form.imgUrl = obj;
      } else {
        this.$message.error(data.msg);
      }
      this.updateing = false;
    },
    update(row){
      this.form = _.cloneDeep(defavalue);
      this.form = {
        ...row
      }
      this.dialogFormVisible = true;
    },
    del({id,name}){
      this.$confirm(`确定要删除 ${name} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del({id:id}).then((res) => {
          if (res.status == 200) {
            this.$message.success("删除成功");
            this.dialogFormVisible = false;
            this.getdata();
          } else {
            this.$message.error(res.msg);
          }
        });
      })
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let datestr = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
          let params = {
            ...this.form,
            taskDesc: this.form.context,
            startTime: datestr,
            userId: this.form.selectuser,
            creater: this.uid,
            content: this.form.context,
          };
          console.log(params);
          if (this.form.id) {
            update(params).then((res) => {
              if (res.status == 200) {
                this.$message.success("修改成功");
                this.dialogFormVisible = false;
                this.getdata();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            save(params).then((res) => {
              if (res.status == 200) {
                this.$message.success("添加成功");
                this.dialogFormVisible = false;
                this.getdata();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.filter-item {
  margin-left: 4px;
  margin-right: 20px;
}
.avaimg {
  width: 50px;
  height: 50px;
}
</style>

